<template>
	<view class="balance-flow-page">
		<!-- 加载状态 -->
		<u-loading :show="loading" text="加载中..."></u-loading>

		<!-- 搜索栏 -->
		<view class="search-section" v-if="showSearch">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input
					class="search-input"
					placeholder="搜索交易类型、账户或订单号"
					v-model="searchKeyword"
					@input="handleSearch"
				/>
				<view class="search-clear" v-if="searchKeyword" @click="clearSearch">
					<text class="clear-icon">✕</text>
				</view>
			</view>
		</view>

		<!-- 日期筛选区域 -->
		<view class="filter-section">
			<view class="date-tabs">
				<view
					class="tab-item"
					:class="{ active: dateType === 'day' }"
					@click="switchDateType('day')"
				>
					日
				</view>
				<view
					class="tab-item"
					:class="{ active: dateType === 'month' }"
					@click="switchDateType('month')"
				>
					月
				</view>
			</view>

			<picker
				mode="date"
				:value="selectedDate"
				@change="onDatePickerChange"
				class="date-picker"
				:fields="dateType"
			>
				<view class="date-picker-content">
					<text class="calendar-icon">📅</text>
					<text class="date-text">{{ formattedSelectedDate }}</text>
				</view>
			</picker>

			<!-- <view
				v-else
				class="date-picker"
				@click="showDatePicker"
			>
				<text class="calendar-icon">📅</text>
				<text class="date-text">{{ formattedSelectedDate }}</text>
			</view> -->
		</view>

		<!-- 数据展示区域 -->
		<view class="data-section">
			<view class="section-title">
				<view class="title-bar"></view>
				<text class="title-text">数据展示</text>
				<text class="question-icon">ⓘ</text>
			</view>

			<view class="data-cards">
				<view class="data-card">
					<view class="card-header">
						<view class="dot red-dot"></view>
						<text class="card-title">总打款余额</text>
					</view>
					<view class="card-amount">
						<text class="amount">{{ formatAmount(statsData.totalDeposit) }}</text>
						<text class="unit">元</text>
					</view>
				</view>

				<view class="data-card">
					<view class="card-header">
						<view class="dot green-dot"></view>
						<text class="card-title">总支出余额</text>
					</view>
					<view class="card-amount">
						<text class="amount">{{ formatAmount(statsData.totalExpense) }}</text>
						<text class="unit">元</text>
					</view>
				</view>

				<view class="data-card">
					<view class="card-header">
						<view class="dot blue-dot"></view>
						<text class="card-title">可用余额</text>
					</view>
					<view class="card-amount">
						<text class="amount">{{ formatAmount(statsData.availableBalance) }}</text>
						<text class="unit">元</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 收支明细区域 -->
		<view class="detail-section">
			<view class="section-title">
				<view class="title-bar"></view>
				<text class="title-text">收支明细</text>
				<text class="question-icon">ⓘ</text>
				<!-- <view class="section-actions">
					<view class="action-btn" @click="toggleSearch">
						<text class="action-icon">🔍</text>
					</view>
				</view> -->
			</view>

			<view class="table-container">
				<!-- 表格头部 -->
				<view class="table-header">
					<view class="header-cell date-col">日期</view>
					<view class="header-cell type-col">政策名称</view>
					<view class="header-cell amount-col">有效区间</view>
					<view class="header-cell account-col">数量(件)</view>
					<view class="header-cell account-col">状态</view>
				</view>

				<!-- 表格内容 -->
				<scroll-view
					class="table-content"
					scroll-y="true"
					:style="{ height: contentHeight + 'px' }"
					@scrolltolower="loadMore"
					:refresher-enabled="true"
					:refresher-triggered="refreshing"
					@refresherrefresh="onRefresh"
				>
				<!-- @click="handleRowClick(item)" -->
					<view
						class="table-row"
						v-for="(item, index) in displayList"
						:key="item.id"
						:class="{ 'row-even': index % 2 === 1 }"
						
					>
						<view class="table-cell date-col">{{ item.ddate }}</view>
						<view class="table-cell type-col" :class="item.typeClass">{{ item.name }}</view>
						<view class="table-cell amount-col" :class="item.amountClass">{{ item.expDate ? item.expDate : '' }} - <br />{{ item.expDate ? item.expDate : '' }}</view>
						<view class="table-cell account-col">{{ item.iqty }}</view>
						<view class="table-cell account-col">{{ item.status }}</view>
					</view>

					<!-- 加载更多 -->
					<view class="load-more" v-if="hasMore && displayList.length > 0">
						<view v-if="loadingMore" class="loading-circle">⟳</view>
						<text class="load-more-text">{{ loadingMore ? '加载中...' : '上拉加载更多' }}</text>
					</view>

					<!-- 没有更多数据 -->
					<view class="no-more" v-if="!hasMore && displayList.length > 0">
						<text class="no-more-text">没有更多数据了</text>
					</view>

					<!-- 空状态 -->
					<view class="empty-state" v-if="!loading && displayList.length === 0">
						<text class="empty-icon">📋</text>
						<text class="empty-text">暂无明细记录</text>
						<view class="empty-btn" @click="onRefresh">
							<text class="empty-btn-text">重新加载</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 统计信息 -->
		<!-- <view class="summary-section" v-if="displayList.length > 0">
			<view class="summary-item">
				<text class="summary-label">交易笔数:</text>
				<text class="summary-value">{{ transactionCount }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">总收入:</text>
				<text class="summary-value income-text">{{ formatAmount(totalIncome) }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">总支出:</text>
				<text class="summary-value expense-text">{{ formatAmount(totalExpense) }}</text>
			</view>
		</view> -->

		<!-- 交易详情弹窗 -->
		<u-popup
			v-model="showDetailPopup"
			mode="bottom"
			height="70%"
			border-radius="20"
		>
			<view class="detail-popup">
				<view class="popup-header">
					<text class="popup-title">交易详情</text>
					<view class="popup-close" @click="showDetailPopup = false">
						<text class="close-icon">✕</text>
					</view>
				</view>

				<view class="popup-content" v-if="selectedItem">
					<view class="detail-item">
						<text class="detail-label">订单号:</text>
						<text class="detail-value">{{ selectedItem.orderNo }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">交易类型:</text>
						<text class="detail-value" :class="selectedItem.typeClass">{{ selectedItem.type }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">交易金额:</text>
						<text class="detail-value" :class="selectedItem.amountClass">{{ selectedItem.amount }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">账户名称:</text>
						<text class="detail-value">{{ selectedItem.account }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">交易状态:</text>
						<text class="detail-value">{{ selectedItem.status || '已完成' }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">交易时间:</text>
						<text class="detail-value">{{ selectedItem.createTime }}</text>
					</view>
					<view class="detail-item" v-if="selectedItem.remark">
						<text class="detail-label">备注:</text>
						<text class="detail-value">{{ selectedItem.remark }}</text>
					</view>
					<view class="detail-item" v-if="selectedItem.beforeBalance">
						<text class="detail-label">交易前余额:</text>
						<text class="detail-value">{{ formatAmount(selectedItem.beforeBalance) }}</text>
					</view>
					<view class="detail-item" v-if="selectedItem.afterBalance">
						<text class="detail-label">交易后余额:</text>
						<text class="detail-value">{{ formatAmount(selectedItem.afterBalance) }}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import balanceFlowMixin from '../../mixins/balanceFlowMixin'

export default {
	name: 'BalanceFlowPage',
	mixins: [balanceFlowMixin],
	data() {
		return {
			// 页面特有的数据可以在这里添加
			params: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
		}
	},
	methods: {
		// 页面特有的方法可以在这里添加
		// 返回上一页
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.balance-flow-page {
	min-height: 100vh;
	background-color: #f5f6fa;

	.search-section {
		padding: 15px 20px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;

		.search-box {
			display: flex;
			align-items: center;
			background-color: #f8f9fa;
			border-radius: 20px;
			padding: 8px 15px;

			.search-icon {
				font-size: 16px;
				margin-right: 8px;
			}

			.search-input {
				flex: 1;
				font-size: 14px;
				color: #333;
			}

			.search-clear {
				margin-left: 10px;

				.clear-icon {
					font-size: 14px;
					color: #999;
				}
			}
		}
	}

	.filter-section {
		background-color: #fff;
		padding: 15px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.date-tabs {
			display: flex;
			background-color: #f0f0f0;
			border-radius: 6px;
			padding: 2px;

			.tab-item {
				padding: 8px 16px;
				border-radius: 4px;
				font-size: 14px;
				color: #666;
				transition: all 0.3s;

				&.active {
					background-color: #007aff;
					color: #fff;
				}
			}
		}

		.date-picker {
			display: flex;
			align-items: center;
			padding: 8px 12px;
			background-color: #f8f9fa;
			border-radius: 6px;
			border: 1px solid #e5e5e5;

			.date-picker-content {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.calendar-icon {
				font-size: 16px;
				margin-right: 8px;
			}

			.date-text {
				font-size: 14px;
				color: #333;
			}
		}
	}

	.data-section, .detail-section {
		margin: 10px 20px 20px;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;

		.section-title {
			display: flex;
			align-items: center;
			padding: 15px 20px;
			background-color: #f8f9fa;
			border-bottom: 1px solid #e5e5e5;

			.title-bar {
				width: 4px;
				height: 16px;
				background-color: #007aff;
				border-radius: 2px;
				margin-right: 10px;
			}

			.title-text {
				// flex: 1;
				font-size: 16px;
				font-weight: 500;
				color: #333;
			}

			.question-icon {
				font-size: 16px;
				color: #999;
				margin-left: 8px;
			}

			.section-actions {
				display: flex;
				align-items: center;
				margin-left: 10px;

				.action-btn {
					width: 30px;
					height: 30px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 15px;
					background-color: #f0f0f0;
					margin-left: 8px;

					.action-icon {
						font-size: 14px;
						color: #666;
					}

					&:active {
						background-color: #e0e0e0;
					}
				}
			}
		}
	}

	.data-cards {
		display: flex;
		padding: 20px 15px;
		gap: 10px;

		.data-card {
			flex: 1;
			text-align: left;

			.card-header {
				display: flex;
				align-items: center;
				margin-bottom: 8px;

				.dot {
					width: 6px;
					height: 6px;
					border-radius: 50%;
					margin-right: 6px;

					&.red-dot {
						background-color: #ff4757;
					}

					&.green-dot {
						background-color: #2ed573;
					}

					&.blue-dot {
						background-color: #007aff;
					}
				}

				.card-title {
					font-size: 11px;
					color: #666;
				}
			}

			.card-amount {
				display: flex;
				align-items: baseline;

				.amount {
					font-size: 16px;
					font-weight: bold;
					color: #333;
				}

				.unit {
					font-size: 11px;
					color: #999;
					margin-left: 2px;
				}
			}
		}
	}

	.table-container {
		.table-header {
			display: flex;
			background-color: #f8f9fa;
			border-bottom: 1px solid #e5e5e5;

			.header-cell {
				padding: 12px 2px;
				font-size: 13px;
				font-weight: 400;
				color: #999;
				text-align: center;

				&.date-col {
					flex: 0.8;
				}

				&.type-col {
					flex: 1;
				}

				&.amount-col {
					flex: 0.8;
				}

				&.account-col {
					flex: 0.8;
				}
			}
		}

		.table-content {
			.table-row {
				display: flex;
				border-bottom: 1px solid #f0f0f0;

				&.row-even {
					background-color: #fafbfc;
				}

				&:active {
					background-color: #e3f2fd;
				}

				&:last-child {
					border-bottom: none;
				}

				.table-cell {
					padding: 12px 2px;
					font-size: 13px;
					color: #333;
					text-align: center;

					&.date-col {
						flex: 0.8;
						color: #666;
						display: flex;
						align-items: center;
					}

					&.type-col {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;

						&.deposit {
							color: #ff4757;
						}

						&.refund {
							color: #2ed573;
						}

						&.recharge {
							color: #ff4757;
						}

						&.rebate {
							color: #ff4757;
						}
					}

					&.amount-col {
						flex: 0.8;

						&.positive {
							color: #ff4757;
						}

						&.negative {
							color: #333;
						}

						&.refund {
							color: #2ed573;
						}
					}

					&.account-col {
						flex: 0.8;
						color: #666;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.load-more {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px;

				.loading-circle {
					font-size: 16px;
					color: #007aff;
					margin-right: 8px;
					animation: rotate 1s linear infinite;
				}

				.load-more-text {
					font-size: 12px;
					color: #999;
				}
			}

			.no-more {
				display: flex;
				justify-content: center;
				padding: 20px;

				.no-more-text {
					font-size: 12px;
					color: #999;
				}
			}

			.empty-state {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 60px 20px;

				.empty-icon {
					font-size: 48px;
					margin-bottom: 15px;
				}

				.empty-text {
					font-size: 14px;
					color: #999;
					margin-bottom: 20px;
				}

				.empty-btn {
					background-color: #007aff;
					color: #fff;
					padding: 8px 20px;
					border-radius: 16px;

					.empty-btn-text {
						font-size: 12px;
						color: #fff;
					}
				}
			}
		}
	}

	.summary-section {
		background-color: #fff;
		margin: 0 20px 20px;
		border-radius: 8px;
		padding: 15px;
		display: flex;
		justify-content: space-around;

		.summary-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.summary-label {
				font-size: 12px;
				color: #666;
				margin-bottom: 5px;
			}

			.summary-value {
				font-size: 16px;
				font-weight: bold;
				color: #333;

				&.income-text {
					color: #ff4757;
				}

				&.expense-text {
					color: #2ed573;
				}
			}
		}
	}

	.detail-popup {
		.popup-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			border-bottom: 1px solid #f0f0f0;

			.popup-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}

			.popup-close {
				width: 30px;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;

				.close-icon {
					font-size: 16px;
					color: #666;
				}
			}
		}

		.popup-content {
			padding: 20px;
			max-height: 400px;
			overflow-y: auto;

			.detail-item {
				display: flex;
				align-items: center;
				padding: 12px 0;
				border-bottom: 1px solid #f8f9fa;

				&:last-child {
					border-bottom: none;
				}

				.detail-label {
					width: 100px;
					font-size: 14px;
					color: #666;
					flex-shrink: 0;
				}

				.detail-value {
					flex: 1;
					font-size: 14px;
					color: #333;

					&.deposit, &.recharge, &.rebate {
						color: #ff4757;
					}

					&.refund {
						color: #2ed573;
					}

					&.positive {
						color: #ff4757;
					}

					&.negative {
						color: #333;
					}
				}
			}
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>